<template>
  <div class="app-page-scroll">
    <t-card header="基础用法">
      <div class="cpm-separator">基于url：data="/system/user/query"</div>
      <lg-picker v-model="value1" title="选择用户" data="/system/user/query" :schema="schema" multiple clearable />
      <div class="cpm-separator">基于api：:data="api.query"</div>
      <lg-picker v-model="value2" title="选择用户" :data="api.query" :schema="schema" clearable />
    </t-card>
    <!---------------------------------   api说明文档      -------------------------------------------->
    <t-card header="属性">
      <t-base-table :columns="propColumns" :data="propsData" style="width: 100%" />
      <div>其他属性参考LgTable组件</div>
    </t-card>
    <t-card header="事件">
      <t-base-table :columns="emitColumns" :data="emitData" style="width: 100%" />
      <div>事件参考使用的组件</div>
    </t-card>
    <t-card header="插槽">
      <t-base-table :columns="slotColumns" :data="slotData" style="width: 100%" />
    </t-card>
    <t-card header="api">
      <t-base-table :columns="apiColumns" :data="apiData" style="width: 100%" />
    </t-card>
  </div>
</template>
<script lang="ts" setup>
import './index.less';
import { ref } from 'vue';
import { IConfigSchema, LgPicker } from '@/soar';
import api from '@/pages/auth/user/api';
import { apiColumns, emitColumns, propColumns, slotColumns } from './index';

const value1 = ref(['1', '3']);
const value2 = ref('1');

const schema: IConfigSchema<any>[] = [
  {
    label: '昵称',
    field: 'nickname',
    dataType: 'string',
  },
  {
    label: '账号',
    field: 'username',
    dataType: 'string',
  },
  {
    field: 'userType',
    label: '用户类型',
    dataType: 'dict',
    params: 'UserTypeEnum',
    table: {
      width: 120,
      sorter: true,
    },
  },
];

const propsData = [
  { name: 'schema', desc: '结构配置（必填）', type: 'IConfigSchema[] | ITableSchema[]', def: '' },
  { name: 'data', desc: '表格数据（必填）', type: 'Function | string | any[]', def: '' },
  { name: 'title', desc: '选择器标题', type: 'string', def: '' },
  { name: 'modelValue', desc: '选择的值，支持v-model', type: 'any', def: '' },
  { name: 'multiple', desc: '是否多选', type: 'boolean', def: '' },
  { name: 'clearable', desc: '可清理', type: 'boolean', def: '' },
  { name: 'disabled', desc: '禁用的', type: 'boolean', def: '' },
  { name: 'readonly', desc: '只读的', type: 'boolean', def: '' },
  { name: 'labelField', desc: '显示字段，label格式，例：field 或 ${field1}（${field2}）', type: 'string', def: '' },
  { name: 'handleLabel', desc: '显示文本处理', type: 'Function', def: '' },
  { name: 'modalProps', desc: '弹窗配置', type: 'any', def: '' },
];

const emitData = [
  { name: 'change', desc: '值变化事件', param: 'values,rows' },
];

const apiData = [
  // { name: 'reload', desc: '重新加载数据，支持传入参数', type: 'function', sample: 'reload({ "name-like": "测试" })' },
];

const slotData = [
  { name: 'default', desc: '默认插槽，用于自定义渲染', scope: 'label，open，clear, removeItem' }
];
</script>
